<template>
  <div style="min-width: 809px">
    <!-- 底部有汇总，查看原型 -->
    <div v-if="$route.path == '/withdrawalList'">
      <div class="vs-search-box">
        <el-form ref="form" :inline="true" :model="paging" label-width="120px">
          <el-form-item label="门店">
            <el-select v-model="paging.store_id" placeholder="请选择">
              <el-option
                v-for="item in storeList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="员工姓名">
            <el-input v-model="paging.staff_name"></el-input>
          </el-form-item>
          <el-form-item label="员工手机号">
            <el-input v-model="paging.phone"></el-input>
          </el-form-item>
          <el-form-item label="" class="vs-right-btns">
            <el-button @click="reset">重置</el-button>
            <el-button @click="handleCurrentChange(1)" type="primary"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item label="申请日期">
            <el-date-picker
              v-model="date"
              @change="changeDate"
              type="daterange"
              range-separator="到"
              start-placeholder="开始日期"
              placeholder="请选择"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div class="vs-table-box">
        <div class="operation-box clear-float">
          <el-button
            class="left-auto"
            icon="el-icon-download"
            @click="exportFile()"
            :loading="isExport"
            >导出</el-button
          >
        </div>
        <el-table v-loading="loading" :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="ID" width="100"> </el-table-column>
          <el-table-column label="门店" min-width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.store.title }}</span>
            </template>
          </el-table-column>
          <el-table-column label="申请日期" min-width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.create_time[0] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="申请时间" min-width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.create_time[1] }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="员工姓名"
            min-width="100"
            prop="name"
          ></el-table-column>
          <el-table-column
            label="身份证"
            min-width="100"
            prop="id_card"
          ></el-table-column>
          <el-table-column
            label="银行卡"
            min-width="100"
            prop="bank_card"
          ></el-table-column>
          <el-table-column label="员工手机号" min-width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.staff.phone }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="可提现金额（元）" min-width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.staff.balance }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="money"
            label="本次提现金额（元）"
            min-width="100"
          >
          </el-table-column>
          <el-table-column prop="create_time" label="提现方式" min-width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.type | typeName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="到账时间" min-width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.arrival_time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="180" fixed="right">
            <template slot-scope="scope">
              <!-- 同意的状态--显示到账时间 -->
              <span
                @click="setRow(1, scope.row)"
                class="tab-table-text"
                v-if="scope.row.status == 1"
                >同意</span
              >
              <span
                @click="setRow(2, scope.row)"
                class="tab-red-text"
                v-if="scope.row.status == 1"
                >驳回</span
              >
              <span
                :class="
                  scope.row.status == 2 ? 'tab-table-text' : 'tab-red-text'
                "
                v-if="scope.row.status != 1"
                >{{ scope.row.status == 2 ? "审核通过" : "已驳回" }}</span
              >
              <span
                @click="setRow(3, scope.row)"
                v-if="!scope.row.arrival_time"
                class="tab-hui-text"
                >到账</span
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="vs-paging-box">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="paging.page"
            :page-size="paging.limit"
            layout="prev, pager, next, jumper"
            :total="paging.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 到账 -->
    <el-dialog
      title="提现到账"
      :visible.sync="dialogFormVisible"
      width="500px"
      :before-close="handleClose"
    >
      <el-form :model="from">
        <el-form-item label="到账时间：">
          <el-date-picker
            @change="chengeTime"
            v-model="value2"
            align="right"
            type="datetime"
            placeholder="请选择"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="提现类型：">
          <el-select
            v-model="from.type"
            placeholder="请选择"
            style="width: 220px"
          >
            <el-option label="银行卡" value="0"></el-option>
            <el-option label="微信" value="1"></el-option>
            <el-option label="支付宝" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="
            dialogFormVisible = false;
            handleClose();
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value2: "",
      ruleFrom: {},
      date: "",
      recordList: [],
      loading: false,
      loading2: false,
      isBtn: false,
      isInfo: false,
      dialogFormVisible: false,
      paging: {
        page: 1,
        total: 0,
        limit: 10,
        staff_name: "",
        store_id: "",
        phone: "",
        start_time: "",
        end_time: "",
      },
      form: {
        date: "",
      },
      isExport:false,
      tableData: [],
      storeList: [],
      from: {
        id: "",
        arrival_time: "",
        type: "",
      },
    };
  },
  created() {
    if (this.$route.path == "/withdrawalList") {
      this.handleCurrentChange(1);
      this.getAllStoreList();
    }
  },
  filters: {
    typeName(val) {
      switch (val) {
        case 0:
          val = "银行卡";
          break;
        case 1:
          val = "微信";
          break;
        case 2:
          val = "支付宝";
          break;
      }

      return val;
    },
  },
  methods: {
    async exportFile() {
      this.isExport = true;
      let res = await this.$Http.exportWithdrawalApply(this.paging);
      this.utils.downloadXlsx(res, "提现审批列表导出");
      this.isExport = false;
    },
    chengeTime(e) {
      this.from.arrival_time = this.utils.time(e, true);
    },
    changeDate(e) {
      this.paging.start_time = this.utils.time(e[0]);
      this.paging.end_time = this.utils.time(e[1]);
      console.log(this.paging, "888888888");
    },
    // 获取全部门店
    async getAllStoreList() {
      let { code, data } = await this.$Http.homegetStore();
      if (code) {
        this.storeList = data;
      }
    },
    async setRow(type, row) {
      let params = {
        id: row.id,
        status: "",
      };
      if (type == 1) {
        //同意
        params.status = 2;
        let { code, data } = await this.$Http.withdrawalApply(params);
        if (code) {
          this.$message.success("您已同意");
          this.handleCurrentChange(1);
        }
      } else if (type == 2) {
        //驳回
        params.status = 3;
        let { code, data } = await this.$Http.withdrawalApply(params);
        if (code) {
          this.$message.success("您已驳回");
          this.handleCurrentChange(1);
        }
      } else if (type == 3) {
        //到账
        this.from.id = row.id;
        this.dialogFormVisible = true;
      }
    },
    async submit() {
      if (!this.from.arrival_time) {
        this.$message.error("请选择到账时间");
        return;
      }
      if (!this.from.type) {
        this.$message.error("请选择提现类型");
        return;
      }
      let { code, data } = await this.$Http.withdrawalArrival(this.from);
      if (code) {
        this.$message.success("操作成功");
        this.dialogFormVisible = false;
        this.handleCurrentChange(1);
      }
    },
    handleClose(dom) {
      this.from = this.$options.data().from;
      this.value2 = "";
      this.dialogFormVisible = false;
      dom && dom();
    },
    async repairGetList() {
      this.loading = true;
      let { code, data } = await this.$Http.getWithdrawalApply(this.paging);
      this.loading = false;
      if (code) {
        data.data.forEach((ele) => {
          let create_time = ele.create_time.split(" ");
          ele.create_time = create_time;
          console.log(create_time, "create_time");
        });
        this.tableData = data.data;
        this.paging.total = data.total;
      }
    },
    reset() {
      //重置
      this.paging = this.$options.data().paging;
      this.form.date = "";
      this.handleCurrentChange(1);
    },
    handleSizeChange(val) {
      this.paging.limit = val;
      this.repairGetList();
    },
    handleCurrentChange(val) {
      this.paging.page = val;
      this.repairGetList();
    },
  },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
  width: 130px;
  height: 130px;
}
</style>